<template>
    <el-row :gutter="20" style="height: 100%;">
        <el-col :span="12">
            <el-form ref="applicationFormRef" :model="applicationForm" label-width="100px" label-suffix=":"
                label-position="top">
                <el-form-item label="应用名称">
                    <div style="display: flex;width: 100%;">
                        <div style="flex: 1;">
                            <el-input v-model="applicationForm.name"></el-input>
                        </div>
                        <div style="width: 50px;">

                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="应用描述">
                    <el-input v-model="applicationForm.description"></el-input>
                </el-form-item>
                <el-form-item label="大语言模型">
                    <el-select v-model="applicationForm.modelId">
                        <el-option v-for="model in modelList" :key="model.id"
                            :label="model.vendorName + '-' + model.name" :value="model.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应用提示">
                    <el-input v-model="applicationForm.tips"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-button type="primary" @click="submitForm">应用</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12">
            <ChatBox :sessionId="'test'" />
        </el-col>
    </el-row>
</template>
<script>
import aiAPI from "@/api/ai";
import ChatBox from "@/components/chat/ChatBox.vue";
export default {
    components: {
        ChatBox
    },
    props: {
        applicationId: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            modelList: [],
            applicationForm: {
                name: '',
                description: '',
                modelId: null,
                tips: '',
                // 其他字段
            }
        };
    },
    watch: {
        applicationId(newId) {
            this.fetchModelList();
            this.fetchApplicationDetail(newId);
        }
    },
    mounted() {
        this.fetchModelList();
        this.fetchApplicationDetail(this.applicationId);
    },
    methods: {
        fetchModelList() {
            aiAPI.fetchModelList().then(response => {
                this.modelList = response.data;
            });
        },
        fetchApplicationDetail(id) {
            aiAPI.getApplicationDetail(id).then(response => {
                this.applicationForm = response.data;
            });
        },
        submitForm() {
            this.$refs.applicationFormRef.validate(valid => {
                if (valid) {
                    aiAPI.updateApplication(this.applicationForm).then(() => {
                        this.$message.success('应用更新成功');
                    });
                }
            });
        }
    }
};
</script>